<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>儿童激励打卡系统 - 登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .login-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
        }
    </style>
</head>
<body class="flex items-center justify-center">
    <div class="login-card p-8 w-full max-w-md">
        <div class="text-center mb-8">
            <i class="fas fa-star text-6xl text-yellow-400 mb-4"></i>
            <h1 class="text-3xl font-bold text-gray-800 mb-2">儿童激励打卡系统</h1>
            <p class="text-gray-600">培养好习惯，赢得小奖励</p>
        </div>
        
        <form id="loginForm" class="space-y-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                <input type="text" id="username" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="请输入用户名">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                <input type="password" id="password" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="请输入密码">
            </div>
            
            <button type="submit" class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition duration-300 font-medium">
                <i class="fas fa-sign-in-alt mr-2"></i>登录
            </button>
        </form>
        
        <div class="mt-6 text-center">
            <p class="text-sm text-gray-600">测试账号：</p>
            <p class="text-xs text-gray-500 mt-1">家长：parent / parent123</p>
            <p class="text-xs text-gray-500">儿童：child / child123</p>
        </div>
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            try {
                const response = await fetch('/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ username, password })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    if (data.role === 'parent') {
                        window.location.href = '/parent';
                    } else {
                        window.location.href = '/child';
                    }
                } else {
                    alert(data.message || '登录失败');
                }
            } catch (error) {
                alert('登录出错，请重试');
            }
        });
    </script>
</body>
</html>
